<template>
  
  <div class="map">
    <el-breadcrumb separator="/" class="mianbao">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>地图管理</el-breadcrumb-item>
      <el-breadcrumb-item>百度地图</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="container"></div>
    
  </div>
</template>

<script setup>
import { onMounted } from "vue";

onMounted(() => {
  //实例化地图
  var map = new BMapGL.Map("container"); //设置地图中心点
  var point = new BMapGL.Point( 108.948063,34.259067); //设置缩放级别
  map.centerAndZoom(point, 12); //开启鼠标滚轮缩放地图
  map.enableScrollWheelZoom(true); //设置地图类型为地球模式
  map.setMapType(BMAP_NORMAL_MAP); //BMAP_EARTH_MAP 卫星地图 // map.setMapType(BMAP_NORMAL_MAP); //BMAP_NORMAL_MAP 普通地图
});
</script>

<style scoped lang='scss'>
#container{
 width: 100%;
 height: 500px;
}
.mianbao{
  margin-bottom: 20px;
}
</style>